<script>
	import TabContainer from './tab_container.vue'
	export default{
		name:'Tabs',
		data(){
			return{
				panes:[]
			}
		},
		props:{
			value:{
				type:[String,Number],
				default:''
			}
		},
		methods:{
			onChange(index){
	      this.$emit("change",index)
	    }
		},
		render(){
			return(
					<div class='tabs'>
						<ul class='tabs-header'>
							{ this.$slots.default }
						</ul>
						<TabContainer panes={ this.panes }></TabContainer>
					</div>
				)
		}
	}
</script>
<style lang="less" scoped>
	.tabs-header{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  border-bottom:2px solid #ededed;
}
</style>